import React, { useState } from 'react';
import { Input, Table } from 'antd';
import * as XLSX from 'xlsx'
const Import = () => {

  const [proList, setProList] = useState()


  // 选中文件之后会回调该函数
  function upload(e){
    // console.log(e.target.files[0]);

    const reader = new FileReader()
    // 将文件读取成数据流
    reader.readAsBinaryString(e.target.files[0])

    // 文件读取成功之后的回调函数
    reader.onload = function(){
        // 将文件数据流读取成 js 对象
        const boox = XLSX.read(reader.result, {type: 'binary'})
        // 在对象中获取 工作表1 中的内容
        let res = boox.Sheets['工作表1']

        // 将表内容转换成 json 数据
        res = XLSX.utils.sheet_to_json(res)

        // console.log(res);
        setProList(res)
    }

  }

  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    }, {
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]
  return (
    <div>
      <h3>数据导入</h3>

      {/* 用来选择文件用的标签，当选中文件后回调 upload 方法 */}
      <Input type='file' onChange={upload} />

      <Table dataSource={proList} rowKey='proname' pagination={{pageSize: 8}} columns={columns} />
    </div>
  );
};

export default Import;
